import React, { Component } from 'react'
import { Link, Switch, Route } from 'react-router-dom'
import Detail from './Detail'
export default class Message extends Component {

    state = {
        messageArr: [
            { id: '01', title: '消息1' },
            { id: '02', title: '消息2' },
            { id: '03', title: '消息3' }
        ]
    }

    pushShow =(id,title) => {
        // push 跳转+携带 params 参数
        // this.props.history.push(`/home/message/detail/${id}/${title}`)
        // push 跳转+携带search 参数
        // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
        // push 跳转 +携带state 参数 
        this.props.history.push('/home/message/detail',{id,title})
    }

    replaceShow=(id,title)=>{
        // replace 跳转+携带params 参数
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)
        // replace 跳转 +携带 search参数
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
        // replace 跳转 +携带 state 参数 
        this.props.history.replace('/home/message/detail',{id,title})
    }


    // 前进
    goForward = () => {
        this.props.history.goForward()
        // console.log(this.props.history)
    }
    goBack = () => {
        // 后退一步 
        this.props.history.goBack()
    }

    render() {
        const { messageArr } = this.state
        return (
            <div>
                <ul>

                    {
                        messageArr.map((msgObj) => {

                            return <li key={msgObj.id}>
                                {/*  向路由组件传递params参数 */}
                                {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`} >{msgObj.title}</Link> */}
                                {/* 向路由组件传递Search参数  */}
                                {/* <Link
                                    to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
                                    {msgObj.title}
                                </Link> */}
                                    {/*  向路由传递 state参数 */}
                                    <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>
                                    {msgObj.title}
                                    </Link>
                                    &nbsp; &nbsp;
                                    <button onClick={()=>{this.pushShow(msgObj.id,msgObj.title)}}>push跳转</button>
                                    &nbsp; &nbsp;
                                    <button onClick={()=>{this.replaceShow(msgObj.id,msgObj.title)}}>release跳转</button>

                            </li>

                        })
                    }



                    {/* <li> 
                <a href="/message1">message1</a>&nbsp;&nbsp;
            </li>
            <li> 
                <a href="/message2">message2</a>&nbsp;&nbsp;
            </li>
            <li> 
                <a href="/message3">message3</a>&nbsp;&nbsp;
            </li> */}
                </ul>
                <Switch>
                    {/*  携带params 参数的时候的声明方式 */}
                    {/* <Route path='/home/message/detail/:id/:title' component={Detail}></Route> */}
                    {/*  携带search 参数的时候 声明方式 */}
                    <Route path='/home/message/detail' component={Detail}></Route>
                      {/*  携带state 参数的时候 声明方式 */}
                      {/* <Route path='/home/message/detail' component={Detail}></Route> */}
                </Switch>

                <button onClick={this.goForward}>前进</button>
                &nbsp;
                <button onClick={this.goBack}>后退</button>
              
            </div>
        )
    }
}
